<!-- 
bootstrap之响应式布局
    - 列隐藏或显示
    - 利用媒体查询功能，根据不同设备宽度将页面内容进行展示或隐藏
    ------------------------- 隐藏
    .hidden-xs  超小屏幕下隐藏，其它屏幕下显示，可同时设置多种设备屏幕
    .hidden-sm
    .hidden-md
    .hidden-lg
    ------------------------- 显示
    .visible-xs
    .visible-sm
    .visible-md
    .visible-lg
    ------------------------- 
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
        <title>列隐藏</title>
        <style>
            .row:nth-child(1) {
                border: 1px solid red;
            }
            .row:nth-child(2) {
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- 类名写在列中 -->
                <div class="col-lg-3">全显</div>
                <div class="col-lg-3 hidden-md">中隐</div>
                <div class="col-lg-3 hidden-sm">小隐</div>
                <div class="col-lg-3 hidden-sm hidden-xs">小隐【或】超小隐</div>
            </div>
            <div class="row">
                <!-- 类名写在列中、或页面元素中 -->
                <div class="col-lg-3"><span class="visible-lg">大显</span></div>
                <div class="col-lg-3"><span class="hidden-md">中隐</span></div>
                <div class="col-lg-3 hidden-sm">小隐</div>
                <div class="col-lg-3 hidden-sm hidden-xs">小隐【或】超小隐</div>
            </div>
        </div>
    </body>
</html>
